<template>
  <div class="flow-analysis">
    <div class="top-card">
      <div class="left-info">
        <img src="@/assets/img/water/flow-icon.png" />
        <div>泵站当前总流量</div>
      </div>
      <div>
        <span class="num-text">400</span>
        <span class="unit-text">L/min</span>
      </div>
    </div>
    <div class="center-top">
      <div class="center-item" v-for="(item,index) in topTitles" :key="index">
        <div class="title">{{index+1}}号管线流量</div>
        <div>
          <span class="value" :style="{color:colors[index]}">{{item.value}}</span>
          <span class="cam">m³/h</span>
        </div>
      </div>
    </div>
    <MouldBoxVue
    style="margin-bottom:0.625rem;"
    :datas="lineLists1"
    :chartOption="{
      color:['#1ed9ff'],
      area:true,
      unit:'m³/h'
    }"
    :text="['总流量']"
    height="12.9375rem"
    chartTitle="泵站总流量趋势分析">
    </MouldBoxVue>
    <MouldBoxVue
    :datas="lineLists2"
    :chartOption="{
      color:colors,
      area:true,
      unit:'m³/h'
    }"
    :text="['1号管线','2号管线','3号管线']"
    height="11.875rem"
    chartTitle="各管线流量趋势分析">
    </MouldBoxVue>
    <div class="center-bottom">
      <div :class="['center-item', cur === index ? 'item-active' : '']" v-for="(item,index) in bottomTitles" :key="index" @click="changeBottomTitle(index)">
        <div class="title">液位{{index+1}}</div>
        <div>
          <span class="value">{{item.value}}</span>
          <span class="cam">m</span>
        </div>
      </div>
    </div>
    <MouldBoxVue
    :datas="lineLists3"
    :chartOption="{
      color:['#1ed9ff'],
      area:true,
      unit:'m'
    }"
    :text="lineText3"
    height="10.6875rem"
    chartTitle="中央水泵房水箱液位变化趋势">
    </MouldBoxVue>
  </div>
</template>

<script>
import MouldBoxVue from '../common/MouldBox.vue';
export default {
  data() {
    return {
      lineLists1: [
        { x: '12-01', y: 38.2, s: '总流量' },
        { x: '12-06', y: 30.2, s: '总流量' },
        { x: '12-11', y: 36.0, s: '总流量' },
        { x: '12-16', y: 37.3, s: '总流量' },
        { x: '12-21', y: 37.9, s: '总流量' },
        { x: '12-26', y: 34.2, s: '总流量' },
        { x: '12-31', y: 36.7, s: '总流量' }
      ],
      lineLists2: [
        { x: '12-01', y: 38.2, s: '1号管线' },
        { x: '12-06', y: 30.2, s: '1号管线' },
        { x: '12-11', y: 36.0, s: '1号管线' },
        { x: '12-16', y: 37.3, s: '1号管线' },
        { x: '12-21', y: 37.9, s: '1号管线' },
        { x: '12-26', y: 34.2, s: '1号管线' },
        { x: '12-31', y: 36.7, s: '1号管线' },
        { x: '12-01', y: 27.5, s: '2号管线' },
        { x: '12-06', y: 23.0, s: '2号管线' },
        { x: '12-11', y: 26.0, s: '2号管线' },
        { x: '12-16', y: 33.7, s: '2号管线' },
        { x: '12-21', y: 37.9, s: '2号管线' },
        { x: '12-26', y: 24.2, s: '2号管线' },
        { x: '12-31', y: 35.1, s: '2号管线' },
        { x: '12-01', y: 37.5, s: '3号管线' },
        { x: '12-06', y: 33.0, s: '3号管线' },
        { x: '12-11', y: 36.0, s: '3号管线' },
        { x: '12-16', y: 23.7, s: '3号管线' },
        { x: '12-21', y: 27.9, s: '3号管线' },
        { x: '12-26', y: 34.2, s: '3号管线' },
        { x: '12-31', y: 25.1, s: '3号管线' }
      ],
      lineLists3: [
        { x: '12-01', y: 38.2, s: '液位1' },
        { x: '12-06', y: 30.2, s: '液位1' },
        { x: '12-11', y: 36.0, s: '液位1' },
        { x: '12-16', y: 37.3, s: '液位1' },
        { x: '12-21', y: 37.9, s: '液位1' },
        { x: '12-26', y: 34.2, s: '液位1' },
        { x: '12-31', y: 36.7, s: '液位1' }
      ],
      cur: 0,
      lineText3: ['液位1']
    };
  },

  components: {
    MouldBoxVue
  },

  computed: {
    routeId() {
      return this.$route.params.id;
    },
    colors() {
      const color = ['#34C8FF', '#ffd101', '#57FFAA'];
      return color;
    },
    topTitles() {
      const data = [
        {
          value: '29.8'
        },
        {
          value: '18.8'
        },
        {
          value: '40.8'
        }
      ];
      return data;
    },
    bottomTitles() {
      const data = [
        {
          value: '2.1'
        },
        {
          value: '1.2'
        },
        {
          value: '4.8'
        },
        {
          value: '1.2'
        },
        {
          value: '4.8'
        }
      ];
      return data;
    }
  },

  methods: {
    changeBottomTitle(index) {
      this.cur = index;
      this.lineText3.splice(0, 1);
      this.lineText3.push(`液位${index + 1}`);
    }
  }
};
</script>
<style scoped lang="scss">
.flow-analysis {
  .top-card {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 3.75rem;

    background: $itemBg;
    border-radius: 0.25rem;
    padding: 0 0.625rem;
    box-sizing: border-box;

    color: $light3Grey;
    font-size: $smallHeadingsText;
    .left-info {
      height: 1rem;
      line-height: 1rem;
      display: flex;
      img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3125rem;
      }
    }

    .num-text {
      font-size: $bigHeadingsText;
      color: $blue;
    }
  }
  .center-top {
    height: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: .625rem;
    margin-bottom: .9375rem;
    .center-item {
      width: 6.5rem;
      height: 100%;
      border-radius: 0.25rem;
      background-color: #273443;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.625rem;
      box-sizing: border-box;
      .title {
        color: #d8d8d8;
        font-size: 0.875rem;
      }
      .value {
        font-size: 0.875rem;
        color: #ffffff;
        margin-right: 0.3125rem;
      }
      .cam {
        font-size: 0.75rem;
        color: #8d8d8d;
      }
    }
  }
  .center-bottom {
    height: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: .9375rem;
    margin-bottom: .9375rem;
    .center-item {
      width: 3.875rem;
      height: 100%;
      border-radius: 0.25rem;
      background-color: #273443;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0.625rem;
      box-sizing: border-box;
      cursor: pointer;
      .title {
        color: #d8d8d8;
        font-size: 0.875rem;
        cursor: pointer;
      }
      .value {
        font-size: 0.875rem;
        color: #57FFAA;
        margin-right: 0.3125rem;
        cursor: pointer;
      }
      .cam {
        font-size: 0.75rem;
        color: #8d8d8d;
        cursor: pointer;
      }
    }
    .center-item:hover{
      cursor: pointer;
    }
    .item-active{
      background-color: rgba(0,253,255,.1);
    }
  }
}
</style>
